<template>
	<view class="wanl-goods">
		<view class="bar-bg solid-bottom"
			style="position:fixed; z-index: 999;background-color: #fcfcfc; width: 100%; top: 0;"
			:style="{ opacity: headerOpacity, pointerEvents: headerOpacity > 0 ? 'all' : 'none' }">
			<scroll-view scroll-x class="nav">
				<view class="flex justify-around text-center">
					<view class="cu-item " :class="selectAnchor==index?'text-orange cur':''"
						v-for="(anchor, index) in anchorlist" :key="anchor.name" @tap="toAnchor(index)">
						{{ anchor.name }}
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 商品主图轮播 -->
		<view class="swiper-box" id="swiper">
			<swiper id="evaluate" circular="true" autoplay="trsue" @change="swiperChange">
				<swiper-item v-for="(swiper, index) in goodsData.images" :key="index">
					<image :src="$wanlshop.oss(swiper, 400, 0)" mode="aspectFill" />
				</swiper-item>
			</swiper>
			<view class="indicator">{{ currentSwiper + 1 }}/{{ goodsData.images.length }}</view>
		</view>

		<!-- 产品 -->
		<view class="bg-white">
			<!-- 秒杀 -->
			<view v-if="goodsData.activity_type === 'seckill'" class="price-rush bg-gradual-red margin-bottom-sm">
				<view class="price align-center  padding-lr-bj">
					<view>
						<view class="text-price text-white text-xxl text-bold margin-right-xs">0<text
								class="text-lg">.00</text>
							<text class="margin-left-sm text-sm">已抢<text class="amount">0</text>件</text>
						</view>
						<view class="text-sm text-white text-price"><text class="text-dec">0.00</text></view>
					</view>
					<view>
						<view class="text-xs margin-bottom-xs">距结束还剩：</view>
						<wanl-countdown :time="1" :height="40" :width="40" :size="28" :colonsize="32" color="#ec008c"
							bcolor="#ffffff" bgcolor="#ffffff" coloncolor="#ffffff"></wanl-countdown>
					</view>
				</view>
			</view>

			<!-- 普通 -->
			<view v-else class="price margin-bottom-sm padding-lr-bj padding-top-bj align-start">
				<view class="flex align-end">
					<view class="text-price text-xxl margin-right-xs wanl-red">{{ goodsData.interval_price || '0.00' }}</view>
					<view class=" wanl-gray-light text-dec text-price margin-left-xs" style="margin-bottom: 6rpx;">
						{{ goodsData.market_price || 0.0 }}
					</view>
				</view>

				<!-- 分享 -->
				<view class="share margin-xs" @tap="showModal('share')">
					<view class="button text-black margin-bottom">
						<!-- <text class="wlIcon-fenxiangcopy margin-right-xs"></text> -->
						<image lazy-load class="share-image" src="../../static/images/default/share.png"></image>
						<text class="text-sm">分享</text>
					</view>
				</view>
			</view>

			<!-- 标题 -->
			<view class="title padding-lr-bj padding-bottom-bj">
				<view class="wanl-black text-xl text-bold">
					<!-- <view v-if="goodsData.shop.isself == 1" class="cu-tag radius margin-right-xs sm bg-red">自营</view> -->
					{{ goodsData.title || '加载中...' }}
				</view>
			</view>

			<view class="block text-min padding-lr padding-bottom-bj">
				<!-- <view class="wanl-gray">
					<text class="wlIcon-weizhi margin-right-xs"></text>
					{{ goodsData.shop.city ? goodsData.shop.city.split('/')[1] : '中国' }}
				</view>
				<view class="wanl-gray">
					快递费：
					<text class="text-price">{{ goodsData.freight.price }}</text>
				</view>
				<view class="wanl-gray">
					月销
					<text class="margin-left-xs">{{ goodsData.sales }}</text>
				</view> -->
				<view class="wanl-gray text-sm">
					{{ goodsData.description || '' }}
				</view>
			</view>
		</view>

		<view class="bg">
			<!-- 促销 -->
			<view class="promotion text-sm section" v-if="goodsData.coupon.length != 0">
				<view class="item" style="padding-left: unset;" @tap="showModal('coupon')">
					<view class="label text-30 text-black">促销</view>
					<view class="conten">
						<view class="promotion-header" v-for="(item, index) in goodsData.coupon" :key="index"
							v-if="index < 2">

							<block
								v-if="item.type == 'reduction' || (item.type == 'vip' && item.usertype == 'reduction')">
								<view class="jiu-tag sm line-orange round margin-right-xs">
									<text>满{{ Number(item.limit) }}减{{ Number(item.price) }}元</text>
								</view>
								<text>{{ item.name }}</text>
							</block>

							<block
								v-if="item.type == 'discount' || (item.type == 'vip' && item.usertype == 'discount')">
								<view class="jiu-tag sm line-orange round margin-right-xs">
									<text>满{{ Number(item.limit) }}打{{ Number(item.discount) }}折</text>
								</view>
								<text>{{ item.name }}</text>
							</block>

							<block v-if="item.type == 'shipping'">
								<view class="jiu-tag sm line-orange round margin-right-xs">
									<text>包邮</text>
								</view>
								<text>满{{ Number(item.limit) }}元包邮</text>
							</block>
						</view>

						<!-- 购物返积分 -->
						<view class="promotion-header" v-if="pointsMax">
							<view class="jiu-tag sm line-orange round margin-right-xs"
								style="background-color: #fd8c00;">
								<text>积分</text>
							</view>
							<text>购买可得{{pointsMax}}积分，积分可抵现</text>
						</view>

					</view>
					<view class="bnt-quan wanl-gray-light" style="right: 0px; color: #9b9b9b;">
						更多<text class="wlIcon-fanhui2 margin-left-xs" style="color: #9b9b9b;"></text>
					</view>
				</view>
			</view>

			<!-- 选择商品 -->
			<view class="choice padding-sm text-sm bg-white section">
				<view class="option select-specifications" @tap="showModal('option')">
					<text class="label">
						<text>规格</text>
					</text>

					<view class="content">
						{{selectSku}}
					</view>

					<text class="wlIcon-fanhui2" style="color: #9b9b9b;"></text>
				</view>

				<view class="option" @tap="showModal('option')">
					<text class="label">
						<text>数量</text>
					</text>

					<view class="content">
						{{selectNum}}件
					</view>
				</view>

				<view class="option store" @tap="$wanlshop.auth(`/pages/service/select_shop?showSwitch=true`)"
					v-if="goodsData.service_id">
					<text class="label">
						<text>门店</text>
					</text>

					<view class="content shop">
						<view v-if="service">
							<view>
								<view class="store_name_view">
									<view class="shop-name">{{service.store_name}}</view>
									<text class="wlIcon-fanhui2" style="color: #9b9b9b;"></text>
								</view>
								<view class="desc">
									<text>距您{{formatDistance(service.distance)}}</text>
									<view class="line"></view>
									<text>{{service.address}}</text>
								</view>
							</view>
							<view class="support" v-if="service">
								<view class="item">
									<image class="check" src="../../static/images/default/check.png"></image> 可预约美容洗护
								</view>
								<view class="item">
									<image class="check" src="../../static/images/default/check.png"></image> 六只花狗售后
								</view>
								<view class="item">
									<image class="check" src="../../static/images/default/check.png"></image> 可预约寄养
								</view>
							</view>
						</view>
						<text v-else>选择门店</text>
					</view>
				</view>
			</view>

			<!-- 商品评价 -->
			<view class="product-evaluation comment margin-bottom-bj padding-bj bg-white section evaluate" id="comment">
				<view class="head" @tap="onTag('')">
					<view class="text-30 text-black">商品评价 ({{ goodsData.comment }})</view>
					<view class="wanl-gray-light" style="font-size: 26rpx;color: #9b9b9b;">
						{{ goodsData.comment > 0 ? parseInt((goodsData.praise / goodsData.comment) * 100) : 0 }}%好评率
						<text class="wlIcon-fanhui2 margin-left-xs" style="color: #9b9b9b"></text>
					</view>
				</view>
				<!-- 标签 -->
				<view class="label margin-bottom">
					<view @tap="onTag('good')" class="cu-tag round">好评 ({{ goodsData.praise }})</view>
					<view @tap="onTag('pertinent')" class="cu-tag round">中评 ({{ goodsData.moderate }})</view>
					<view @tap="onTag('poor')" class="cu-tag round">差评 ({{ goodsData.negative }})</view>
					<view @tap="onTag('figure')" class="cu-tag round">有图 ({{ goodsData.comment_list.figure }})</view>
					<view @tap="onTag(index)" v-for="(item, index) in goodsData.comment_list.tag" :key="index"
						class="cu-tag round">
						{{ index }} ({{ item }})
					</view>
				</view>
				<!-- 获取一个评论 -->
				<view class="user" v-for="(item, index) in goodsData.comment_list.data" :key="item.id" @tap="onTag('')">
					<view class="userinfo-view" v-if="item.user">
						<view class="avatar">
							<view class="cu-avatar sm round margin-right-sm"
								:style="{ backgroundImage: 'url(' + $wanlshop.oss(item.user.avatar, 26, 26, 2, 'avatar') + ')' }">
							</view>
							<view class="text-sm wanl-gray">{{ item.user.nickname }}</view>
						</view>
						<!-- <wanl-rate :current="item.score" :disabled="true"></wanl-rate> -->

						<view class="details text-min">
							<view class="content">{{ item.content }}</view>
							<!-- <view class="wanl-gray">购买：{{ item.suk }}</view> -->
						</view>
					</view>

					<view class="image-view"
						:style="{ backgroundImage: 'url(' + $wanlshop.oss(item.images.length ? item.images[0] : '') + ')', backgroundSize: 'cover' }">
					</view>

					<!-- <view class="grid flex-sub grid-square" :class="[item.images.length > 3 ? 'col-3' : 'col-2']"
						v-if="item.images.length != 0">
						<view class="bg-img" style="margin-bottom: unset;" v-for="(image, index) in item.images"
							:key="index" v-if="index <= 3"
							:style="{ backgroundImage: 'url(' + $wanlshop.oss(image, 88, 88) + ')' }"></view>
					</view> -->
				</view>
			</view>

			<!-- 购买流程 -->
			<view class="comment buyProcess margin-bottom-bj padding-bj bg-white section evaluate" id="buyProcess"
				v-if="buyProcess.pickup">
				<view class="head" @tap="goBuyProcess('')">
					<view class="text-30 text-black">购买流程</view>
					<view class="wanl-gray-light" style="font-size: 26rpx;color: #9b9b9b;">
						查看详情
						<text class="wlIcon-fanhui2 margin-left-xs" style="color: #9b9b9b"></text>
					</view>
				</view>

				<view class="process">
					<view class="up">
						<view class="up-box" v-for="(item, index) in buyProcess.pickup" :key="index">
							<view class="step">
								<view class="image">
									<image style="width: 100%; height: 100%" :src="$wanlshop.oss(item.icon)"></image>
								</view>
								<text>{{ item.title }}</text>
							</view>

							<view class="line" v-if="!((index + 1) % 4 == 0)"></view>
						</view>
						<!-- <view class="step">
							<view class="image">
								<image style="width: 100%; height: 100%" src="../../static/images/default/buy-01.png"></image>
							</view>
							<text>选择商品</text>
						</view>
						
						<view class="line"></view>
						
						<view class="step">
							<view class="image">
								<image style="width: 100%; height: 100%" src="../../static/images/default/buy-02.png"></image>
							</view>
							<text>选择服务</text>
						</view>
						
						<view class="line"></view>
						
						<view class="step">
							<view class="image">
								<image style="width: 100%; height: 100%" src="../../static/images/default/buy-03.png"></image>
							</view>
							<text>选择门店</text>
						</view>
						
						<view class="line"></view>
						
						<view class="step">
							<view class="image">
								<image style="width: 100%; height: 100%" src="../../static/images/default/buy-04.png"></image>
							</view>
							<text>下单付款</text>
						</view> -->
					</view>

					<!-- <view class="down">
						<view class="step">
							<view class="image">
								<image style="width: 100%; height: 100%" src="../../static/images/default/buy-05.png"></image>
							</view>
							<text>配送到店</text>
						</view>
						
						<view class="line"></view>
						
						<view class="step">
							<view class="image">
								<image style="width: 100%; height: 100%" src="../../static/images/default/buy-06.png"></image>
							</view>
							<text>预约门店</text>
						</view>
						
						<view class="line"></view>
						
						<view class="step">
							<view class="image">
								<image style="width: 100%; height: 100%" src="../../static/images/default/buy-07.png"></image>
							</view>
							<text>到店洗护</text>
						</view>
						
						<view class="line"></view>
						
						<view class="step">
							<view class="image">
								<image style="width: 100%; height: 100%" src="../../static/images/default/buy-08.png"></image>
							</view>
							<text>结束/评价</text>
						</view>
					</view> -->
				</view>
			</view>

			<!-- 常见问题 -->
			<view class="comment margin-bottom-bj padding-bj bg-white section evaluate" id="problem"
				v-if="problem.length">
				<view class="head" @tap="onProblem('')">
					<view class="text-30 text-black">常见问题</view>
					<view class="wanl-gray-light" style="font-size: 26rpx;color: #9b9b9b;">
						查看更多
						<text class="wlIcon-fanhui2 margin-left-xs" style="color: #9b9b9b"></text>
					</view>
				</view>

				<view class="problem-content">
					<view class="content-ul" v-for="(item, index) in problem" :key="item.id">
						<view class="content-li">
							<text class="ask">问</text>
							<text class="ask-content">{{ item.question }}</text>
						</view>
						<view class="content-li">
							<text class="answer">答</text>
							<text class="answer-content">{{ item.answer }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 种草秀 -->
			<view class="grass-show section" @tap="$wanlshop.to(`/pages/seeding/seeding?id=${goodsData.id}`)"
				v-if="seedingData.length">
				<view class="head">
					<view class="text-30 text-black grass-show-title">种草秀</view>
				</view>
				<view class="grid flex-sub grid-square"
					:class="[seedingData.length > 3 ? 'col-3' : 'col-' + seedingData.length]"
					v-if="seedingData.length > 0">
					<view class="bg-img" v-for="(item, index) in seedingData" :key="index" v-if="index < 6"
						:style="{ backgroundImage: 'url(' + $wanlshop.oss(item.images[0], 88, 88) + ')' }"></view>
				</view>
			</view>

			<!-- 产品详情 -->
			<view class="section prod-details" id="details">
				<view class="head">
					<view class="text-30 text-black details-title">产品详情</view>
				</view>
				<view class="wanl-goods-content bg-white">
					<rich-text :nodes="goodsData.content"></rich-text>
				</view>
			</view>
		</view>

		<!-- 为你推荐 -->
		<view class="recommond" id="recommend">
			<!-- <view class="wanl-you-like margin-bottom-sm" :style="{ backgroundImage: 'url(' + $wanlshop.oss(common.appStyle.guess_you_like_icon) + ')' }"></view> -->
			<view class="recommond-text">
				<!-- <wanl-divider width="60%">为你推荐</wanl-divider> -->
				<view class="section-title">为你推荐</view>
			</view>
			<view>
				<wanl-product :dataList="likeData" />
			</view>
			<uni-load-more :status="status" :content-text="contentText"></uni-load-more>
		</view>

		<view class="safeAreaBottom"></view>
		<view class="WANL-MODAL text-sm" @touchmove.stop.prevent="moveHandle">
			<!-- 顶部 -->
			<view class="cu-modal top-modal" :class="modalName == 'menu' ? 'show' : ''" @tap="hideModal">
				<view class="wanl-modal-menu cu-dialog" @tap.stop=""><wanl-direct @change="hideModal" /></view>
			</view>
			<!-- 促销 -->
			<view class="cu-modal bottom-modal" :class="modalName == 'promotion' ? 'show' : ''" @tap="hideModal">
				<view class="cu-dialog" @tap.stop="">
					<view class="wanl-modal">
						<view class="head padding-bj">
							<view class="content">
								<view class="text-lg">促销</view>
							</view>
							<view class="close wlIcon-31guanbi" @tap="hideModal"></view>
						</view>
					</view>
				</view>
			</view>
			<!-- 优惠券 -->
			<view class="cu-modal bottom-modal couponModal" :class="modalName == 'coupon' ? 'show' : ''"
				@tap="hideModal">
				<view class="cu-dialog bg-bgcolor" @tap.stop="">
					<view class="wanl-modal">
						<view class="head padding-bj">
							<view class="content">
								<view class="text-lg">优惠券</view>
							</view>
							<view class="close wlIcon-31guanbi" @tap="hideModal"></view>
						</view>
						<scroll-view class="wanl-coupon scroll-y" scroll-y="true">
							<view v-for="(coupon, index) in goodsData.coupon" :key="index" :class="coupon.type"
								class="item-counpon margin-bottom-bj radius-bock">
								<view class="up">
									<view class="item-left">
										<view class="dot dot1"></view>
										<view class="dot dot2"></view>
										<view class="dot dot3"></view>
										<view class="dot dot4"></view>
										<view class="dot dot5"></view>
										<view class="dot dot6"></view>

										<block
											v-if="coupon.type == 'reduction' || (coupon.type == 'vip' && coupon.usertype == 'reduction')">
											<view class="colour">
												<text class="text-price"></text>
												<text class="prices text-red">{{ Number(coupon.price) }}</text>
												<text> 起</text>
											</view>
											<view class="cu-tag wanl-gray-dark radius text-sm bg-white">
												每满{{ Number(coupon.limit) }}可用
											</view>
										</block>
										<block
											v-if="coupon.type == 'discount' || (coupon.type == 'vip' && coupon.usertype == 'discount')">
											<view class="colour">
												<text class="prices text-red">{{ Number(coupon.discount) }}</text>
												<text class="discount text-red">折</text>
											</view>
											<view class="cu-tag wanl-gray-dark radius text-sm bg-white">
												满{{ Number(coupon.limit) }}打{{ Number(coupon.discount) }}折
											</view>
										</block>
										<block v-if="coupon.type == 'shipping'">
											<view class="colour">
												<text class="prices text-red">包邮</text>
											</view>
											<view class="cu-tag wanl-gray-dark radius text-sm bg-white">
												满{{ Number(coupon.limit) }}元包邮
											</view>
										</block>
									</view>
									<view class="item-right-coupon padding-bj"
										:class="coupon.open ? 'item-right-coupon-open' : ''">
										<view class="left">
											<view class="title">
												<view class="cu-tag sm radius margin-right-xs tagstyle"
													style="background-color: #fd8c00; color: #ffffff;">
													{{ coupon.type_text }}
												</view>
												<view class="text-cut text-lg">{{ coupon.name }}</view>
											</view>
											<view class="wanl-gray">
												<text
													class="startdate">{{ coupon.startdate && coupon.startdate.replaceAll('-', '.') }}</text>
												<text>-</text>
												<text
													class="startdate">{{ coupon.enddate && coupon.enddate.replaceAll('-', '.') }}</text>
												<!-- <view v-if="coupon.grant != '-1'">
													<text class="-dot"></text>目前仅剩余 {{coupon.surplus}} 张
												</view> -->

												<!-- <view v-if="coupon.drawlimit != 0">
													<text class="wlIcon-dot"></text>每人仅限领取 {{coupon.drawlimit}} 张
												</view> -->
												<!-- <block v-if="coupon.pretype == 'fixed'"> -->
												<!-- <view>
														<text class="wlIcon-dot"></text>生效 {{coupon.startdate}}
													</view> -->
												<!--	<view class="wanl-gray-light">
														有效期至 {{ coupon.enddate }}
													</view>
												</block> -->
												<!-- <block v-if="coupon.pretype == 'appoint'">
													<view v-if="coupon.validity == 0">
														<text class="wlIcon-dot"></text>未使用前 永久 有效
													</view>
													<view v-else>
														<text class="wlIcon-dot"></text>领取后 {{coupon.validity}} 天有效
													</view>
												</block> -->
											</view>
											<view class="description" @tap="changeDesc(index)">
												<text>使用说明</text>
												<image src="../../static/images/default/shrink.png" class="image shrink"
													v-if="!coupon.open"></image>
												<image src="../../static/images/default/expand.png"
													class="image coupon-sign" v-if="coupon.open"></image>
											</view>
										</view>
										<view class="content text-min">
											<image :src="$wanlshop.appstc('/coupon/img_couponcentre_received_3x.png')"
												class="coupon-sign" v-if="coupon.state"></image>
											<view class="cu-btn sm round"
												style="background-color: #fd8c00; color: #ffffff;"
												@tap="onReceive(index)" v-if="!coupon.state">
												<text>立即领取</text>
											</view>
										</view>
									</view>
								</view>

								<view class="down" v-if="coupon.open">
									<view class="desc">{{ coupon.coupon.content || coupon.rangetype_text }}</view>
								</view>
							</view>
						</scroll-view>
						<view class="foot padding-lr-bj"><button class="cu-btn round text-bold complete text-white"
								style="background-color:#fd8c00;" @tap="hideModal">完成</button>
						</view>
					</view>
				</view>
			</view>
			<!-- 分享 -->
			<view class="cu-modal bottom-modal" :class="modalName == 'share' ? 'show' : ''" @tap="hideModal">
				<view class="cu-dialog" @tap.stop="">
					<wanl-share v-if="modalName == 'share'" :scrollAnimation="scrollAnimation"
						:shareTitle="goodsData.title" :shareText="goodsData.description"
						:image="$wanlshop.oss(goodsData.image, 50, 50)" :images="goodsData.images"
						:href="common.appConfig.domain + '/pages/product/goods?id=' + goodsData.id + '&QRtype=goods'"
						isReport @change="wanlShare" />
				</view>
			</view>
			<!-- 规格 -->
			<view class="cu-modal bottom-modal" :class="modalName == 'option' ? 'show' : ''" @tap="hideModal">
				<view class="cu-dialog" @tap.stop="">
					<view class="option wanl-modal">
						<view class="head text-left padding-bj align-start" style="gap: 20rpx;">
							<view class="cu-avatar radius-bock" style="flex-shrink: 0;"
								:style="{ backgroundImage: 'url(' + $wanlshop.oss(selectshop.thumbnail || goodsData.image, 100, 100) + ')' }">
							</view>

							<view style="flex:1;">
								<view class="text-xl margin-bottom-sm" style="padding-right: 30rpx;">
									{{ goodsData.title }}
								</view>

								<view class="text-price wanl-red text-xl margin-bottom-xs">
									{{ selectshop.price || goodsData.interval_price }}
								</view>
								<view v-if="selectArr.join('')" class="wanl-gray margin-bottom-xs">
									库存 <text class="margin-lr-xs">{{ selectshop.stock || 0 }}</text> 件
								</view>

								<view class="text-sm margin-bottom-sm flex align-center justify-between">
									<view v-if="selectArr.join('')">已选择：{{ selectArr.join(' ') }}</view>
									<view v-else>
										请选择：
										<text class="wanl-gray-light" v-for="(item, index) in goodsData.spu"
											:key="item.id">
											<block v-if="index != 0">-</block>
											{{ item.name }}
										</text>
									</view>

									<view class="number" style="scale: 0.8;">
										<!-- <view class="text-df">购买数量</view> -->
										<uni-number-box :min="1" :max="selectshop.stock" :value="selectNum"
											:disabled="canCount" @change="changeNum" @tap="clickNum"></uni-number-box>
									</view>
								</view>
							</view>

							<view class="close wlIcon-31guanbi" @tap="hideModal"></view>
						</view>

						<view class="specifications">
							<view class="solid-bottom text-left padding-left padding-bottom text-min">
								{{ goodsData.description }}
							</view>

							<!-- 1.0.8升级 -->
							<scroll-view class="scroll-sku" scroll-y="true"
								:style="{ maxHeight: wanlsys.screenHeight / 2 + 'px' }">
								<view class="">
									<!-- 选择规格 -->
									<view class="opt text-left solid-bottom" v-for="(value, spukey) in goodsData.spu"
										:key="value.id">
										<view class="text-df">{{ value.name }}</view>
										<view class="tag">
											<view class="cu-tag text-sm" v-for="(item, index) in value.item"
												:key="index"
												:class="[item.ishow ? '' : 'noactive', subIndex[spukey] == index ? 'active' : '']"
												@tap="skuClick(item, spukey, $event, index)">
												{{ item.name }}
											</view>
										</view>
									</view>

									<!-- 选择服务 -->
									<view class="select_serve solid-bottom" v-if="serveData.length">
										<view class="text-df text-left margin-bottom-bj">选择服务</view>

										<checkbox-group name="" class="serve_content" @change="selectServe">
											<view class="item" v-for="(item,index) in serveData" :key="index">
												<label class="radio">
													<view class="serve_type">
														<text>{{item.category}}</text>
														<checkbox :value="item.id"
															:checked="serveArr.indexOf(String(item.id)) == -1 ? false : true"
															activeBackgroundColor="#FE8C00" color="#FE8C00"
															backgroundColor="transparent" borderColor="#FE8C00" />
													</view>

													<view class="serve_title"><text>{{item.name}}</text></view>

													<view class="serve_info">{{item.quantity}}次/￥{{item.unit_price}}
													</view>
												</label>
											</view>
										</checkbox-group>
									</view>

									<!-- 选择门店 -->
									<view v-if="goodsData.service_id"
										class="padding-top-bj text-left flex align-center justify-between">
										<view class="text-df">选择门店</view>
										<view style="font-size: 22rpx;"
											@tap="$wanlshop.auth('/pages/service/select_shop')">
											更多＞
										</view>
									</view>

									<radio-group style="width: 100%;box-sizing: border-box;" name="" v-if="service"
										class="service_content">
										<view class="shop_addr">
											<text>距离最近</text>
											<view class="">{{ service.store_name }}</view>
											<label class="radio">
												<radio :value="service.id" checked activeBackgroundColor="#11e195" />
											</label>
										</view>

										<view class="shop_content">
											<view class="image">
												<image :src="$wanlshop.oss(service.store_avatar, 80, 80)"
													mode="aspectFill" />
											</view>

											<view class="right">
												<view class="title">
													<!-- {{ service.store_name }} -->
													<!-- 现货，今天18:00前下单，预计5月31日送达 -->
													{{ service.description }}
												</view>

												<view class="distance">距您{{formatDistance(service.distance)}}</view>

												<view class="address">
													{{ service.address }}
												</view>

											</view>
										</view>

										<!-- <view class="shop_other">
											<text>口碑好店</text>
											<view class="">途虎养车工场店(广州富怡路店)</view>
											<label class="radio">
												<radio value="" activeBackgroundColor="#11e195" />
											</label>
										</view> -->
									</radio-group>
								</view>
							</scroll-view>
						</view>

						<!-- 加入购物车/立即订购 -->
						<view class="foot padding-lr-bj" style="background-color: white;">
							<button v-if="isChoice" class="cu-btn round text-bold text-white complete"
								style="background-color: #fd8c00;" @tap="completeSelection">完成</button>
							<block v-else>
								<button class="cu-btn round-left text-bold text-white"
									style="background-color: #daad7c;" @tap="SubmitData('addToCart', 1)">加入购物车</button>
								<button class="cu-btn round-right text-bold text-white"
									style="background-color: #fd8c00;" @tap="SubmitData('placeOrder', 1)">立即订购</button>
							</block>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部 -->
		<view class="wanlian cu-bar tabbar shop solid-top foot">
			<view class="flex align-center">
				<view class="action"
					@tap="toChat(goodsData.shop_id, { id: goodsData.id, title: goodsData.title, image: goodsData.image, price: goodsData.price })">
					<view class="wlIcon-kefu">
						<view class="cu-tag badge"></view>
					</view>
					客服
				</view>

				<view class="action" @tap="toCart">
					<view class="wlIcon-gouwuche">
						<view class="cu-tag badge" v-if="cart.cartnum > 0">{{ cart.cartnum }}</view>
					</view>
					购物车
				</view>
			</view>

			<view class="btn-group" style="flex: 1;">
				<button class="cu-btn round-left text-white" style="background-color: #daad7c;width: 50%"
					@tap="SubmitData('addToCart')">加入购物车</button>
				<button class="cu-btn round-right text-white" style="background-color: #fd8c00;width: 50%"
					@tap="SubmitData('placeOrder')">立即购买</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				seedingData: [], // 种草
				service: null, // 服务
				TabCur: 0,
				wanlsys: {},
				modalName: null, // 弹出层
				durect: 0, // 角标
				headerOpacity: 0, //不透明度
				currentSwiper: 0, // 轮播图右下角数字
				anchorlist: [{
					name: '主图',
					top: 0
				}, {
					name: '评价',
					top: 0
				}, {
					name: '详情',
					top: 0
				}, {
					name: '推荐',
					top: 0
				}], //导航条锚点
				selectAnchor: 0,
				//产品数据
				goodsData: {
					description: '·35%高易消化蛋白 ·0诱食剂 ·65%深海鱼肉添加', // 描述
					service_id: null, // 服务
					id: 0,
					category_id: 0,
					shop_id: 0,
					brand_id: 0,
					freight_id: 0,
					title: '',
					image: '',
					images: [],
					flag: '',
					content: '',
					category_attribute: [],
					activity_type: 'goods',
					price: null,
					interval_price: null,
					market_price: null,
					sales: 0,
					brand: {},
					freight: {
						name: '',
						isdelivery: 1
					},
					payment: 0,
					comment: 0,
					praise: 0,
					moderate: 0,
					negative: 0,
					like: 0,
					views: 0,
					status: '',
					category: {},
					follow: true,
					sku: [],
					spu: [],
					promotion: [],
					coupon: [],
					comment_list: {
						data: [],
						figure: 0,
						tag: []
					},
					shop: {
						find_user: {
							fans: 0
						},
						city: ''
					},
					shop_recommend: {}
				},
				// 常见问题
				problem: [],
				// 购买流程
				buyProcess: {},
				// 猜你喜欢
				reload: true,
				likeData: [],
				current_page: 1, //当前页码
				last_page: 1, //总页码
				status: 'loading',
				contentText: {
					contentdown: ' ',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				},
				// 商品规格组合
				shopItemInfo: {}, //存放要和选中的值进行匹配的数据
				selectArr: [], //存放被选中的值
				subIndex: [], //是否选中 因为不确定是多规格还是但规格，所以这里定义数组来判断
				selectshop: {}, //存放最后选中的商品
				selectNum: 1, //选中数量
				isChoice: '', // 是否从选择进入
				scrollAnimation: 100, //分享滚动
				// 选择服务
				serveData: [
					// {
					// 	name: '爱宠洗澡',
					// 	type: '小型宠',
					// 	price_text: '10次/￥299',
					// 	price: '299'
					// }, {
					// 	name: '爱宠洗澡',
					// 	type: '中型宠',
					// 	price_text: '10次/￥400',
					// 	price: '400'
					// }, {
					// 	name: '爱宠洗澡',
					// 	type: '大型宠',
					// 	price_text: '10次/￥800',
					// 	price: '800'
					// }, 
				],
				serveArr: [],
			};
		},
		// 分享好友
		onShareAppMessage: function(res) {
			if (res.from === 'button') {
				// 来自页面内转发按钮
			}

			return {
				title: this.goodsData.description,
				path: '/pages/product/goods?id=' + this.goodsData.id + '&QRtype=goods',
				imageUrl: this.$wanlshop.oss(this.goodsData.images[0], 50, 50)
			};
		},
		onLoad(option) {
			this.wanlsys = this.$wanlshop.wanlsys();
			this.loadData(option);
			this.loadlikeData();
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			});
			// #endif
			this.durect =
				this.$store.state.statistics.notice.notice +
				this.$store.state.statistics.notice.order +
				this.$store.state.statistics.notice.chat +
				this.$store.state.statistics.order.pay +
				this.$store.state.statistics.order.delive +
				this.$store.state.statistics.order.receiving +
				this.$store.state.statistics.order.evaluate;
		},
		onShow() {
			// 接收来自 选择门店 的数据
			/* let pages = getCurrentPages();
			let currPage = pages[pages.length - 1]; //当前页面

			// #ifdef MP-WEIXIN
			// console.log('currPage', currPage.data)
			let json = currPage.data.service;
			// #endif

			// #ifndef MP-WEIXIN
			// console.log('currPage', currPage._data)
			let json = currPage._data.service;
			// #endif

			this.service = json; */
			// console.log('service', this.service)
			// console.log('this.service', this.service)
			
			const store_desc = uni.getStorageSync('store_details') || '';
			this.service = store_desc;
			this.serveData = store_desc?.store_services || [];
		},
		onPageScroll(e) {
			//导航栏渐变
			let tmpY = 150;
			e.scrollTop = e.scrollTop > tmpY ? 150 : e.scrollTop; //如果当前高度大于250则250否则当前高度
			this.headerOpacity = e.scrollTop * (1 / tmpY); //$headerOpacity 赋值当前高度x（1÷250）
		},
		watch: {
			selectshop(n, o) {
				if (n.price != o.price) {
					// 更新一次优惠券
					this.queryCoupon(n.price);
				}
			}
		},
		computed: {
			...mapState(['cart', 'common']),
			canCount() {
				return this.subIndex.some(item => item === -1);
			},

			// 计算最多积分
			pointsMax() {
				let arr = [];
				this.goodsData.sku.forEach(item => {
					arr.push(item.points_back);
				})
				return Math.max(...arr);
			},

			// 选中的sku
			selectSku() {
				return this.selectArr[0] == "" ? '请选择规格数量' : this.selectArr.join('-');
			}
		},
		methods: {
			// 计算距离换算单位
			formatDistance(distanceInMeters) {
				if (distanceInMeters >= 1000) {
					// 将距离从米转换为千米，并保留两位小数
					const distanceInKilometers = (distanceInMeters / 1000).toFixed(2);
					return `${distanceInKilometers}km`;
				} else {
					return `${(distanceInMeters).toFixed(2)}m`;
				}
			},
			// 选择门店服务
			selectServe(e) {
				if (e.detail.value?.length) {
					this.serveArr = [e.detail.value[e.detail.value?.length - 1]];
				} else {
					this.serveArr = [];
				}
			},
			onReachBottom() {
				//判断是否最后一页
				if (this.current_page >= this.last_page) {
					this.status = 'noMore';
				} else {
					this.reload = false;
					this.current_page = this.current_page + 1; //页码+1
					this.status = 'loading';
					this.loadlikeData();
				}
			},
			// 获取推荐门店
			async recommendStore(longitude, latitude) {
				this.$api.get({
					url: `/wanlshop/store/recommend`,
					data: {
						longitude,
						latitude
					},
					success: res => {
						console.log("推荐门店", res);
						this.service = res || [];
						this.serveData = res?.store_services || []
					}
				})
			},
			async loadData(option) {
				this.serveArr = [];
				this.service = [];
				//加载商品
				this.$api.get({
					url: '/wanlshop/product/goods',
					data: option,
					success: res => {
						//详情正则
						res.content = res.content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (match,
							capture) => {
							var img =
								`<img style="display: block; max-width: 100%;" src="${this.$wanlshop.oss(capture, 500, 0)}">`;
							return img;
						});

						// 价格区间
						if (res.sku.length == 0) {
							res.interval_price = res.price;
							res.market_price = res.price;
						} else {
							let price = [],
								market_price = [];
							for (let value of res.sku) {
								price.push(value.price);
								market_price.push(value.market_price);
							}
							let minPrice = Math.min.apply(null, price),
								maxPrice = Math.max.apply(null, price),
								maxMarketPrice = Math.max.apply(null, market_price);
							res.interval_price = minPrice == maxPrice ? Number(minPrice).toFixed(2) : (
								minPrice + '-' + Number(maxPrice).toFixed(2)); //区间价格
							res.market_price = Number(maxMarketPrice).toFixed(2); //最大市场价
						}

						this.goodsData = res;
						this.goodsData?.coupon.map(item => {
							item.open = false;
						})
						// console.log('商品详细信息', this.goodsData)

						// 商品规格组合
						this.goodsData.spu.map(item => {
							this.selectArr.push('');
							this.subIndex.push(-1);
						});
						this.checkItem(); //计算sku里面规格形成路径
						this.checkInpath(-1); //传-1是为了不跳过循环

						//加载常见问题
						this.$api.get({
							url: '/wanlshop/faq/index',
							data: {
								category_id: this.goodsData?.category_id,
							},
							success: res => {
								const array = [];
								res.map((item, index) => {
									if (index <= 1) {
										array.push(item);
									}
								})
								this.problem = array;
							}
						})

						//加载购买流程
						this.$api.get({
							url: '/wanlshop/buy_step/index',
							data: {
								category_id: this.goodsData?.category_id,
							},
							success: res => {
								this.buyProcess = res;
							}
						})

						// 加载种草列表
						this.$api.get({
							url: '/wanlshop/product/goodShow?id=' + this.goodsData.id,
							success: res => {
								this.seedingData = res.comment.data;
								// console.log('this.seedingData', this.seedingData)
								// 计算锚点高度
								setTimeout(() => {
									this.calcAnchor();
								}, 1000);
							}
						})

						if (this.goodsData?.service_id) {
							let THIS = this;
							// 加载推荐门店
							this.$wanlshop.location().then(res => {
								console.log('当前定位', res)
								if (res.code == 1) {
									let loc = res.data.address.streetNumber.location.split(',');
									// console.log('loaction',loc)
									THIS.recommendStore(loc[0], loc[1]);
								}
							})
						}
					}
				});
			},
			// 滚动底部加载猜你喜欢
			async loadlikeData() {
				this.$api.get({
					url: '/wanlshop/product/likes?pages=goods',
					data: {
						page: this.current_page,
					},
					success: res => {
						this.likeData = this.reload ? res.data : this.likeData.concat(res.data); //评论数据 追加
						this.current_page = res.current_page; //当前页码
						this.last_page = res.last_page; //总页码
						this.status = 'more';
					}
				});
			},
			// 查询优惠券，减缓服务器压力，单独查询
			async queryCoupon(price) {
				this.$api.post({
					url: '/wanlshop/coupon/query',
					data: {
						shop_id: this.goodsData.shop_id,
						goods_id: this.goodsData.id,
						shop_category_id: this.goodsData.shop_category_id,
						price: price
					},
					success: res => {
						this.goodsData.coupon = res;
					}
				});
			},
			// 是否展开使用说明
			async changeDesc(index) {
				this.goodsData.coupon[index].open = !this.goodsData?.coupon[index].open;
				this.$set(this.goodsData.coupon, index, this.goodsData.coupon[index]);
			},
			// 领取优惠券
			async onReceive(index) {
				let coupon = this.goodsData.coupon[index];
				this.$api.post({
					url: '/wanlshop/coupon/receive',
					loadingTip: '领取中',
					data: {
						id: coupon.id
					},
					success: res => {
						coupon.id = res.id;
						coupon.state = true;
						this.$wanlshop.msg(res.msg);
						// 更新状态管理器
						this.$store.commit('statistics/dynamic', {
							coupon: this.$store.state.statistics.dynamic.coupon + 1
						});
					}
				});
			},
			// 商品规格组合 选择
			skuClick(value, spukey, event, index) {
				if (value.ishow) {
					if (this.selectArr[spukey] != value.name) {
						this.$set(this.selectArr, spukey, value.name);
						this.$set(this.subIndex, spukey, index);
					} else {
						this.$set(this.selectArr, spukey, '');
						this.$set(this.subIndex, spukey, -1);
					}
					this.checkInpath(spukey);
					//如果全部选完
					if (this.selectArr.every(item => item != '')) {
						this.selectshop = this.shopItemInfo[this.selectArr];
						this.selectNum = 1;
					}
				}
			},
			//循环所有属性判断哪些属性可选
			checkInpath(clickIndex) {
				//当前选中的兄弟节点和已选中属性不需要循环
				for (let i = 0, len = this.goodsData.spu.length; i < len; i++) {
					if (i == clickIndex) {
						continue;
					}
					let len2 = this.goodsData.spu[i].item.length;
					for (let j = 0; j < len2; j++) {
						if (this.subIndex[i] != -1 && j == this.subIndex[i]) {
							continue;
						}
						let choosed_copy = [...this.selectArr];
						this.$set(choosed_copy, i, this.goodsData.spu[i].item[j].name);
						let choosed_copy2 = choosed_copy.filter(item => item !== '' && typeof item !== 'undefined');
						if (this.shopItemInfo.hasOwnProperty(choosed_copy2)) {
							this.$set(this.goodsData.spu[i].item[j], 'ishow', true);
						} else {
							this.$set(this.goodsData.spu[i].item[j], 'ishow', false);
						}
					}
				}
				// console.log(this.goodsData.spu)
			},
			//计算有多小种可选路径
			checkItem() {
				let result = this.goodsData.sku.reduce(
					(arrs, items) => {
						return arrs.concat(
							items.difference.reduce(
								(arr, item) => {
									return arr.concat(
										arr.map(item2 => {
											//利用对象属性的唯一性实现二维数组去重
											if (!this.shopItemInfo.hasOwnProperty([...item2, item])) {
												this.shopItemInfo[[...item2, item]] = items;
											}
											return [...item2, item];
										})
									);
								},
								[
									[]
								]
							)
						);
					},
					[
						[]
					]
				);
			},
			//商品规格修改数量
			changeNum(val) {
				if (this.selectshop.stock) {
					let num = parseInt(val);
					if (num > this.selectshop.stock) {
						this.$wanlshop.msg(`数量不能超过库存 ${this.selectshop.stock} 件`);
						this.selectNum = parseInt(this.selectshop.stock);
					} else {
						this.selectNum = parseInt(val);
					}
				}
			},
			clickNum() {
				if (this.canCount) this.$wanlshop.msg('请选择规格');
			},
			//轮播图指示器
			swiperChange(e) {
				this.currentSwiper = e.detail.current;
			},
			// 弹出层
			showModal(name) {
				this.isChoice = '';
				// 滚动下分享
				if (name == 'share' && this.modalName != 'share') {
					setTimeout(() => {
						this.scrollAnimation = 0;
					}, 300);
				}
				this.modalName = name;
			},
			// 关闭弹出层
			hideModal(name) {
				if (name) {
					this.showModal(name);
				} else {
					this.modalName = null;
				}
			},
			// 分享回调
			wanlShare(e) {
				if (e) {
					this.$wanlshop.auth(`/pages/user/complaint/complaint?id=${this.goodsData.id}&type=1`);
				} else {
					this.modalName = null;
				}
			},
			//禁止父元素滑动
			moveHandle() {},
			// 关注 & 取消
			follow() {
				this.goodsData.follow = !this.goodsData.follow;
				// 全局控制中心
				if (this.goodsData.follow) {
					this.$store.commit('statistics/dynamic', {
						collection: this.$store.state.statistics.dynamic.collection + 1
					});
				} else {
					this.$store.commit('statistics/dynamic', {
						collection: this.$store.state.statistics.dynamic.collection - 1
					});
				}
				this.$api.post({
					url: '/wanlshop/product/follow',
					data: {
						id: this.goodsData.id
					},
					success: res => {
						this.goodsData.follow = res;
					}
				});
			},
			//跳转锚点
			toAnchor(index) {
				// console.log('anchorList', this.anchorlist)
				this.selectAnchor = index;
				uni.pageScrollTo({
					scrollTop: this.anchorlist[index].top,
					duration: 200
				});
			},
			//计算锚点高度
			calcAnchor() {
				let query = null;
				// 支付宝小程序不能加后面的.in(this)，是它自身的限制
				// #ifndef MP-ALIPAY
				query = uni.createSelectorQuery().in(this)
				// #endif
				// #ifdef MP-ALIPAY
				query = uni.createSelectorQuery()
				// #endif
				query.select('#evaluate').boundingClientRect(rec => {
					// console.log('rec-1',rec)
					this.anchorlist[0].top = rec.top - 45;
				}).exec();

				query.select('#comment').boundingClientRect(rec => {
					// console.log('rec-2',rec)
					this.anchorlist[1].top = rec.top - 45;
				}).exec();

				query.select('#details').boundingClientRect(rec => {
					// console.log('rec-3',rec)
					this.anchorlist[2].top = rec.top - 45;
				}).exec();

				query.select('#recommend').boundingClientRect(rec => {
					// console.log('rec-3',rec)
					this.anchorlist[3].top = rec.top - 45;
				}).exec();
			},
			// 评论页
			onTag(tag) {
				this.$wanlshop.to('/pages/product/comment?id=' + this.goodsData.id + '&praise=' + this.goodsData.praise +
					'&tag=' + tag);
			},
			// 打开购买流程
			goBuyProcess() {
				this.$wanlshop.to('/pages/product/buyProcess?category_id=' + this.goodsData.category_id);
			},
			// 打开常见问题
			onProblem() {
				this.$wanlshop.to('/pages/product/problem?category_id=' + this.goodsData.category_id);
			},
			// 打开购物车
			toCart() {
				uni.switchTab({
					url: '/pages/cart'
				});
			},
			// 完成选择
			completeSelection() {
				if (this.canCount) {
					this.$wanlshop.msg('请选择完成规格');
				} else {
					this.ProcessingData();
				}
			},
			// 提交数据
			SubmitData(name, type) {
				// if (!this.subIndex[0]) {
				// this.$wanlshop.msg('客官先别急，系统还在加载');
				// } else {

				// }
				if (type == 1) {
					if (this.canCount) {
						this.$wanlshop.msg('请选择完成规格');
					} else {
						this.isChoice = name;
						this.ProcessingData();
					}
				} else {
					this.modalName = 'option';
					this.isChoice = name;
				}
			},
			ProcessingData() {
				if (this.isChoice == 'addToCart') {
					let price = 0;
					if (this.serveArr?.length) {
						let item = this.service.store_services.filter(item => item.id == this.serveArr[0]);
						price = Number(this.selectshop.price) + Number(item?.length ? item[0].unit_price : 0);
					} else {
						price = this.selectshop.price;
					}
					this.$store.dispatch('cart/add', {
						shop_id: this.goodsData.shop_id,
						shop_name: this.goodsData.shop.shopname,
						goods_id: this.goodsData.id,
						title: this.goodsData.title,
						number: this.selectNum,
						image: this.goodsData.image,
						sku: this.selectshop,
						sku_id: this.selectshop.id,
						sum: this.$wanlshop.bcmul(price, this.selectNum),
						store_id: this.service?.id || undefined, // 当前门店id
						store_service_id: this.serveArr?.length ? this.serveArr[0] : undefined, // 当前门店服务id
					});
					this.$wanlshop.msg('已加购物车');
				} else if (this.isChoice == 'placeOrder') {
					let goodsData = [{
						goods_id: this.goodsData.id,
						number: this.selectNum,
						sku_id: this.selectshop.id,
						store_id: this.service?.id, // 当前门店id
						store_service_id: this.serveArr?.length ? this.serveArr[0] : '', // 当前门店服务id
					}];
					// 提交订单
					if (this.$store.state.user.isLogin) {
						uni.redirectTo({
							url: `/pages/user/order/addorder?order_type=groups&data=${JSON.stringify(goodsData)}`
						});
					} else {
						this.$wanlshop.to('/pages/user/auth/name');
					}

				} else {
					this.$wanlshop.msg('数据异常');
				}
				this.hideModal();
			},
			productSearch(text) {
				this.$wanlshop.to(`/pages/page/search?type=goods&keywords=${text}`, 'fade-in', 100);
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #fafafa;
	}

	.bg {
		padding: 18rpx !important;
	}

	toast,
	uni-toast {
		z-index: 9999;
	}

	.cu-custom .cu-bar .search-form {
		background-color: #fff;
	}

	.cu-custom .cu-bar {
		background-color: #f3f3f3;
	}

	.cu-custom .bar-bg {
		background-color: rgba(243, 243, 243, 0.96);
	}

	.cu-custom .cu-bar {
		z-index: 99;
	}

	/* #ifdef MP */
	.cu-custom .cu-bar .search-form {
		margin: 0 0 0 25rpx;
	}

	/* #endif */

	.cu-custom .cu-bar .nav .cu-item {
		line-height: 70rpx;
		height: 70rpx;
	}

	.swiper-box {
		position: relative;
		width: 100%;
		height: 100vw;
	}

	.swiper-box swiper {
		width: 100%;
		height: 100vw;
	}

	.swiper-box swiper swiper-item image {
		width: 100%;
		height: 100vw;
	}

	.swiper-box .indicator {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 25upx;
		height: 40upx;
		border-radius: 40upx;
		font-size: 22upx;
		position: absolute;
		bottom: 20upx;
		right: 20upx;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.2);
	}

	// .comment .head {
	// 	font-size: ;
	// }

	.jiu-title {
		position: relative;
		padding-left: 18rpx;
		margin-bottom: 18rpx;
	}

	.jiu-title::after {
		content: "";
		position: absolute;
		left: -0rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 6rpx;
		height: 80%;
		background: linear-gradient(to bottom, white 0%, #11e195 100%);
	}

	.section {
		margin: 24rpx;
		box-sizing: border-box;
		box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.05);
		border-radius: 16rpx;
		background-color: #ffffff;
		padding: 18rpx;
		margin-bottom: 18rpx !important;
	}

	.section:last-child {
		margin-bottom: 300rpx !important;
	}

	// 为你推荐
	.recommond {
		.recommond-text {
			margin-bottom: 30rpx;
		}

		padding: 0rpx;
		margin-top: -274rpx;

		.wanl-you-like {
			margin-bottom: 60rpx !important;
		}
	}

	// 选择服务
	.select_serve {

		.serve_content {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 20rpx;
			text-align: center;

			.item {
				border: 2rpx solid #FE8C00;
				border-radius: 20rpx;
				overflow: hidden;
				text-align: center;

				.serve_type {
					background-color: #FE8C0050;
					position: relative;
					padding: 4rpx;

					text {
						font-size: 20rpx;
					}

					label {
						border: 1px solid blue;
						font-size: 0;
					}



					checkbox {
						position: absolute;
						top: 0;
						right: 0rpx;
						// transform: translateY(-50%);
						width: 40rpx;
						height: 40rpx;
						transform: scale(0.4);
						// border: 1px solid red;

						& ::v-deep .uni-checkbox-input,
						& ::v-deep .wx-checkbox-input {
							border-radius: 50% !important;
						}

						&[checked] ::v-deep .wx-checkbox-input,
						&[checked] ::v-deep .uni-checkbox-input {
							background-color: #FE8C00 !important;
							border-color: #FE8C00 !important;
							color: #FE8C00 !important;
						}

						&::before {
							display: none;
						}
					}
				}

				.serve_title {
					margin: 0 6rpx;
					border-bottom: 2rpx solid #FE8C00;
					padding: 6rpx 0;
					color: #FE8C00;
					font-size: 26rpx;
					font-weight: bold;
				}

				.serve_info {
					font-size: 20rpx;
					padding: 6rpx 0;
					color: #FE8C00;
				}
			}
		}
	}


	// 选择门店
	.service_content {
		background-color: #ffffff;
		padding: 26rpx;
		padding-bottom: 0;
		text-align: left;
		/* #ifdef MP */
		margin-bottom: calc(118rpx + env(safe-area-inset-bottom));
		;
		/* #endif */

		.shop_addr,
		.shop_other {
			background-color: #f3f3f3;
			color: #3D3D3D;
			font-size: 24rpx;
			display: flex;
			padding: 20rpx;
			gap: 10rpx;
			align-items: center;
			border-radius: 10rpx;
			height: 70rpx;

			text {
				font-size: 20rpx;
				color: #e2b995;
				border: 2rpx solid #e2b995;
				padding: 2rpx 4rpx;
				border-radius: 8rpx;
				background-color: #f6efe9;
			}

			view {
				flex: 1;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}

			radio {
				transform: scale(0.7);
			}
		}

		.shop_addr {
			border-radius: 10rpx 10rpx 0 0;
		}

		.shop_content {
			display: flex;
			align-items: flex-start;
			gap: 20rpx;
			margin-bottom: 20rpx;
			padding: 20rpx;
			background-color: #fcfcfc;
			border-radius: 0 0 10rpx 10rpx;

			.image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 10rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}

			.right {
				flex: 1;
				font-size: 22rpx;
				display: flex;
				flex-direction: column;
				gap: 16rpx;

				.tag_distance {
					display: flex;
					gap: 30rpx;
					width: 100%;

					.tag_scroll {
						max-width: 70%;
					}

					.tag_list {
						display: flex;
						gap: 8rpx;

						.tag {
							border: 2rpx solid #9C9C9C;
							color: #9C9C9C;
							padding: 2rpx 4rpx;
							font-size: 22rpx;
							border-radius: 8rpx;
							flex-shrink: 0;

							&.active {
								border-color: #11E195;
								color: #11E195;
							}
						}
					}

					.distance {
						font-size: 24rpx;
						color: #3D3D3D;
					}
				}
			}
		}
	}

	// 选择商品
	.choice {
		.option {
			display: flex;
			gap: 28rpx;
			align-items: flex-start;
			margin-bottom: 20rpx;
			padding-left: 16rpx;

			.label {
				font-size: 28rpx;
			}

			.content {
				flex: 1;
			}

			.shop {
				.shop-name {
					//margin-bottom: 10rpx;
				}

				.desc {
					display: flex;
					align-items: center;
					gap: 20rpx;
					font-size: 20rpx;
					color: #9C9C9C;

					.line {
						width: 2rpx;
						height: 18rpx;
						background-color: #9C9C9C;
					}
				}
			}
		}

		.store {
			background-color: #f9f9f9;
			border-radius: 16rpx;
			padding: 16rpx 0 16rpx 16rpx;
		}

		.store_name_view {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 10rpx;
		}

		.desc {
			margin-bottom: 10rpx;
		}

		.support {
			color: #E4B51B;
			font-size: 20rpx;
			display: flex;
			align-items: center;
			gap: 20rpx 40rpx;
			flex-wrap: wrap;

			.item {
				display: flex;
				align-items: center;
				color: #fd8c00;
			}

			.check {
				width: 24rpx;
				height: 24rpx;
				margin-right: 8rpx;
			}
		}
	}

	.seeding {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 22rpx;
		width: 100%;

		.seeding_item {
			width: 100%;
		}
	}

	// 分享
	.share {
		.button {
			border: 1rpx solid #694644;
			border-radius: 16rpx;
			padding: 4rpx 12rpx;
		}

		.share-image {
			width: 24rpx;
			height: 24rpx;
			margin-right: 4rpx;
		}

		.text-sm {
			color: #694644;
		}
	}

	// 优惠券
	.couponModal {
		.head {
			background-color: #ffffff;
		}

		.wanl-coupon {
			background-color: #f6efe9;
		}

		.scroll-y {
			padding: 24rpx;
		}

		.item-counpon {
			min-height: 214rpx;
			border-left: 20rpx solid #fd8c00;
			border-right: 20rpx solid #fd8c00;
			border-top: 16rpx solid #fd8c00;
			border-bottom: 16rpx solid #fd8c00;
			background-color: #fd8c00;

			.up {
				display: flex;
			}

			.down {
				border-radius: 0 0 12rpx 12rpx;

				border-top: 1rpx solid transparent;
				background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, #ccc 0, #ccc 6rpx, white 0, white 10rpx);

				.desc {
					border-radius: 0 0 12rpx 12rpx;
					padding: 20rpx 24rpx;
					background-color: #f6f6f6;
					color: $font-color-light;
				}
			}
		}

		.item-left {
			background-color: #ffe8cc;
			position: relative;
			min-width: 180rpx;
			width: 180rpx;
			max-height: 190rpx;
			text-align: center;
			padding-top: 40rpx;

			.prices {
				font-size: 40rpx;
				font-weight: bold;
			}

			.dot {
				width: 16rpx;
				height: 16rpx;
				border-radius: 50%;
				background-color: #fd8c00;
				position: absolute;
				left: -8rpx;
			}

			.dot1 {
				top: 12rpx;
			}

			.dot2 {
				top: 42rpx;
			}

			.dot3 {
				top: 72rpx;
			}

			.dot4 {
				top: 102rpx;
			}

			.dot5 {
				top: 132rpx;
			}

			.dot6 {
				top: 162rpx;
			}
		}

		.bg-white {
			background-color: transparent;
			color: #141214;
		}

		.colour {
			color: #141214;

			text {
				color: #141214;
			}

			.text-red {
				color: #141214;
			}
		}

		.item-right-coupon {
			padding: 20rpx;
			max-height: 190rpx;
			display: flex;
			flex-wrap: nowrap;
			background-color: #ffffff;
			border-radius: 0 12rpx 12rpx 0;
			width: 100%;

			.coupon-sign {
				width: 120rpx;
				height: 120rpx;
			}

			.left {
				width: 322rpx;

				.wanl-gray {
					margin: 20rpx 0;
					color: #a3a3a3;
				}
			}

			.title {
				display: flex;
				align-items: center;

				.tagstyle {
					font-size: 22rpx;
					padding: 0rpx 12rpx;
					height: 36rpx;
				}
			}

			.content {
				display: flex;
				align-items: center;
				width: auto;
			}

			.description {
				display: flex;
				align-items: center;
				width: 146rpx;

				text {
					color: #2f2f2f;
					font-size: 24rpx;
					margin-right: 16rpx;
				}

				.image {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}

		.item-right-coupon-open {
			border-radius: 0 12rpx 0 0;
		}
	}

	.bg {
		background-color: #f6efe9;
		padding: 24rpx;

		.section {
			margin: 0rpx;
			margin-bottom: 24rpx;
		}

		.select-specifications {
			padding-top: 18rpx;
		}
	}

	// 商品评价
	.product-evaluation {
		.head {
			padding-top: 24rpx;

			.text-black {
				color: #404040;
			}
		}

		.label {
			display: flex;
			justify-content: space-around;
		}

		.cu-tag {
			background-color: #dca879 !important;
			border-radius: 16rpx !important;
			margin-right: 0rpx !important;
		}

		.user {
			background-color: #f6efe9;
			padding: 24rpx 18rpx;
			border-radius: 16rpx;
			display: flex;
			justify-content: space-between;
			margin-bottom: 0rpx !important;

			.userinfo-view {
				.avatar {
					display: flex;
					align-items: center;

					.wanl-gray {
						color: #333333;
					}
				}

				.details {
					margin-bottom: 0rpx !important;

					.content {
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 3;
						overflow: hidden;
						text-overflow: ellipsis;
						padding-right: 42rpx;
					}
				}
			}

			.image-view {
				width: 164rpx;
				height: 164rpx;
				background-position: center;
				background-repeat: no-repeat;

				.image {
					width: 164rpx;
					height: 164rpx;
					border-radius: 8rpx;
				}
			}
		}
	}

	// 购买流程
	.buyProcess {
		padding-top: 42rpx;

		.process {

			.up,
			.down {
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				flex-wrap: wrap;
			}

			.up {
				margin: 42rpx 0 32rpx 0;

				.up-box {
					display: flex;
					align-items: center;
				}
			}

			.down {
				margin-bottom: 24rpx;
			}

			.step {
				// display: flex;
				// flex-wrap: wrap;
				// justify-content: center;
				display: flex;
				flex-wrap: wrap;
				width: 130rpx;
				align-items: center;
				justify-content: center;

				text {
					color: #333333;
					font-size: 28rpx;
					padding-top: 12rpx;
				}
			}

			.line {
				width: 24rpx;
				height: 32rpx;
				background: url('../../static/images/default/line.png') no-repeat;
				margin-bottom: 42rpx;
				background-size: 100% 100%;
				margin-left: 10rpx;
			}

			.image {
				width: 82rpx;
				height: 82rpx;
			}
		}
	}

	// 常见问题
	.problem-content {
		.content-ul {
			padding: 48rpx 0 24rpx 0;
			border-bottom: 1rpx solid #f1f1f1;

			.content-li {
				margin-bottom: 24rpx;
				display: flex;
				align-items: flex-start;
				line-height: 44rpx;

				.ask,
				.answer {
					margin-right: 16rpx;
					height: 32rpx;
					line-height: 32rpx;
				}

				.ask {
					color: #ff8c1b;
					border: 1rpx solid #ff8c1b;
					background-color: #fff2e2;
					font-size: 24rpx;
					padding: 4rpx 8rpx;
					border-radius: 8rpx;
				}

				.answer {
					color: #7ca878;
					border: 1rpx solid #7ca878;
					background-color: #f0ffe2;
					font-size: 24rpx;
					padding: 4rpx 8rpx;
					border-radius: 8rpx;
				}

				.ask-content {
					color: #363636;
				}

				.answer-content {
					color: #6e6e6e;
				}
			}
		}

		.content-ul:last-child {
			padding-bottom: 0rpx;
			border-bottom: none;
		}
	}

	// 种草秀
	.grass-show-title {
		padding-top: 32rpx;
		padding-bottom: 24rpx;
	}

	// 产品详情
	.prod-details {
		padding: 0rpx !important;

		.details-title {
			padding: 32rpx 18rpx 24rpx 18rpx;
		}
	}

	// 规格
	.specifications {
		padding: 0 24rpx;

		.solid-bottom {
			padding: 24rpx 0;
		}

		.service_content {
			padding: 26rpx 0 26rpx 0;
		}
	}

	// 为你推荐
	.section-title {
		margin: 0 auto 30rpx;
		width: fit-content;
		font-size: 32rpx;
		font-weight: bold;
		background: linear-gradient(to right, #f64d01, #ffb700);
		-webkit-background-clip: text;
		color: transparent;
		position: relative;

		@mixin title {
			content: '';
			position: absolute;
			width: 50rpx;
			height: 6rpx;
			top: 50%;
			transform: translateY(-50%);
		}

		&::before {
			@include title;
			left: -60rpx;
			background-color: #f64d01;
		}

		&::after {
			@include title;
			right: -60rpx;
			background-color: #ffb700;
		}
	}
</style>